<!--
 * @Author: wangding
 * @Date: 2020-10-23 09:49:42
 * @LastEditTime: 2021-01-25 11:42:28
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\system\role\drawer.vue
-->
<template>
    <div class="drawer-main-box-base" v-loading="loading">
        <div class="fixed-box">
            <el-button type="primary" @click='dispatchMenu()'>{{$t('save')}}</el-button>
            <el-button type="primary" @click='closeDrawer'>{{$t('close')}}</el-button>
        </div>
        <div class="scroll-box" :style="scrollHeighr">
            <el-tree
            :data="allMenusList"
            show-checkbox
            node-key="id"
            :props="defaultProps"
            :default-expand-all='true'
            ref='newTopRightsTree'
            :default-checked-keys="returnCheckList"
            >
            </el-tree>
        </div>
    </div>
</template>

<script>
export default {
    components: {

    },
    props: {
        allMenusList:{
            type:Array,
            default:()=>{return []}
        },
        checkData:{
            type:Array,
            default:()=>{return []}
        },
        roleId:{
            type:String,
            default:''
        },
        userRoleSid:{
            type:Object,
            default:()=>{return {}}
        },
    },
    data() {
        return {
            defaultProps: {
            children: 'children',
            label: 'menuName'
            },
            scrollHeighr:`max-height: ${document.body.clientHeight-160}px;`,
            loading:true,
            returnCheckList:[]
        };
    },
    computed: {
        checkDataSid(){
            return this.checkData.map(item=>{ return item.menuId})
        }
    },
    watch: {
        checkDataSid:{
            handler(nv,ov){
                this.returnCheck()
            },
            deep:true
        }
    },
    created() {

    },
    mounted() {
        window.onresize = () =>{
            this.scrollHeighr=`max-height: ${document.body.clientHeight-160}px;`
        }
        this.$nextTick(() => {
           this.$refs.newTopRightsTree.setCheckedKeys([])
        })
    },  
    methods: {
        closeDrawer(){
            this.$emit('closeDrawer')
        },
        async dispatchMenu(){
            this.loading = true
            let menuIds = [...this.$refs.newTopRightsTree.getCheckedNodes(),...this.$refs.newTopRightsTree.getHalfCheckedNodes()]
            let ids = menuIds.map(item=>{
                return item.sid
            })
            let res = await this.API.dispatchMenu({
                roleId:this.roleId,
                menuIds:ids
            })
            if(res.success){
                this.$message({
                    message: this.$t('index.control_success'),
                    type: 'success'
                });
                this.$emit('uploadData',this.userRoleSid)
            }else{
                this.$message({
                    message: this.$t('index.control_fail'),
                    type: 'warning'
                });
            }
            this.loading = false
        },
        //默认勾选
        returnCheck(){
            this.returnCheckList = []
            this.checkDataSid.forEach(item =>{
                if(this.returnFlag(item)){
                    this.returnCheckList.push(item)
                }
            })
            // console.log(arr,'arr')
            // console.log(this.allMenusList,'allMenusList');
            this.loading = false
            return this.returnCheckList
        },
        //查看是否是一级菜单
        returnFlag(val){
            let flag = true
            this.allMenusList.forEach(item => {
                if(item.id == val){
                    if(item.isLeaf != 1){
                        flag = false
                    }
                }
            })
            return flag
        }
    },
};
</script>

<style  lang="less" >
    .drawer-main-box-base{
        padding: 10px;
        .el-tree-node__label {
            color: #000 !important;
        }
        .scroll-box{
            overflow-y:scroll;
            
            max-height: 500px;
            margin-top:10px;
        }
        .fixed-box{
            // position: fixed;
            // top: 65px;
            // right: 15%;
        }
    }
    
</style>
